<template>
	<view class="container">
		<form @submit="formSubmit" @reset="formReset">
		<view class="tui-page__bd">
			<tui-form ref="form">
				
				<tui-input label="真实姓名" :lineLeft="false" required clearable  placeholder="请输入真实姓名" name= "name" v-model="formData.name"></tui-input>
				
				<tui-input label="手机号" :lineLeft="false" required clearable placeholder="请输入手机号" name="mobile" v-model="formData.mobile"></tui-input>
				<view class="gender">
					<text style="color: #EB0909;position: absolute;left: 12rpx;">*</text>
					<text>性别</text>
					<tui-radio-group @change="changeGender" required name="sex" style="margin-left: 20rpx;">
						<tui-radio :checked="formData.sex==1" value="1" borderColor="#999" style="margin-left: 10rpx;"></tui-radio>
						<text class="tui-text" style="margin-left: 10rpx; margin-right: 20rpx;">男</text>
						<tui-radio :checked="formData.sex==2" value="2" color="#e60012" borderColor="#999"></tui-radio>
						<text class="tui-text" style="margin-left: 10rpx;">女</text>
					</tui-radio-group>
				</view>
				<view class="form-item" >
					<text style="color: #EB0909;position: absolute;left: 12rpx;">*</text>
					<label style="flex: 3;">证件类型</label>
					<tui-picker :show="showCert" :pickerData="certTypes" @hide="showCert=false" required style="margin-left:20rpx" @change="changeCertType"> </tui-picker>
					<div style="flex: 6;" class="input" @tap="showCert=true">{{formData.certType}}</div>
					<tui-icon name="arrowdown" @tap="showCert=true"></tui-icon>
				</view>
				<tui-input label="证件号码" :lineLeft="false" required placeholder="请输入证件号码" name="idcard" v-model="formData.idcard"></tui-input>
				<tui-input label="国家或地区" :lineLeft="false" required name="countyName" placeholder="请输入国家或地区" v-model="formData.countyName"></tui-input>
				<tui-input label="紧急联系人" :lineLeft="false" required placeholder="请输入紧急联系人" name="emerPerson" v-model="formData.emerPerson"></tui-input>
				<tui-input label="紧急联系电话" :lineLeft="false" required placeholder="请输入紧急联系电话" name="emerMobile" v-model="formData.emerMobile"></tui-input>
				<view class="gender">
					<text style="color: #EB0909;position: absolute;left: 12rpx;">*</text>
					<label style="flex: 2;">出生日期</label>
					<picker mode="date" fields="day" name="birthday" :value="formData.birthday" start="1930-01-01" end="currentDate" style="margin-left: 20rpx;flex: 6;"
						@change="bindDateChange">
						<view class="picker" >
							{{birthdayStr||'请选择出生日期'}}
						</view>
					</picker>
					<tui-icon name="arrowdown" @tap="bindDateChange" style="flex: 1;"></tui-icon>
				</view>
				<!-- <tui-input label="衣服尺码" :lineLeft="false" required placeholder="请输入衣服尺码" v-model="formData.colthingSize"></tui-input> -->
				<!-- <view class="gender">
					<text style="color: #EB0909;position: absolute;left: 12rpx;">*</text>
					<label style="flex: 2;">衣服尺码</label>
					<picker  name="colthingSize" :value="formData.colthingSize" :range="refundReasonArray" style="margin-left: 20rpx;flex: 6;"
						@change="bindPickerChange">
						<view class="picker">
							{{formData.colthingSize||'请选择衣服尺码'}}
						</view>
					</picker>
					<tui-icon name="arrowdown" @tap="bindPickerChange" style="flex: 1;"></tui-icon>
				</view> -->
				<!-- <tui-input label="血型" :lineLeft="false" placeholder="请输入血型" v-model="formData.bloodType"></tui-input> -->
				<view class="form-item" >
					<text style="color: #EB0909;position: absolute;left: 12rpx;">*</text>
					<label style="flex: 2;">血型选择</label>
					<tui-picker :show="showblood" :pickerData="bloodTypes" :value="formData.bloodType" @hide="showblood=false" style="margin-left:20rpx" @change="changeBloodType">
						<view class="picker">
							<!-- asdfasdf
							{{bloodTypeStr||'请选择血型'}} -->
						</view>
					</tui-picker>
					<div style="flex: 6;" class="input" @tap="showblood=true">{{formData.bloodType || bloodTypeStr}}</div>
					<tui-icon name="arrowdown" @tap="showblood=true"></tui-icon>
				</view>
				<tui-input label="民族" :lineLeft="false" required placeholder="请输入民族" name="nation" v-model="formData.nation"></tui-input>
				<!-- <view class="tui-btn__box">
					<tui-button width="400rpx" height="84rpx" bold @click="submit">提交</tui-button> @click="submit"
				</view> -->
				<view class="tui-btn-box">
					<button class="tui-button-primary" formType="submit" hover-class="tui-button-hover" type="primary">提交</button>
					<!-- <button class="tui-button-primary tui-button-gray" hover-class="tui-button-gray_hover" @click="canncel">取消</button> -->
				</view>
			</tui-form>
		</view>
		</form>
	</view>
</template>

<script>
	const form = require('@/components/thorui/tui-form/tui-validation.js');
	const util = require("@/utils/util.js")
	const app = getApp();
	//表单校验规则
	const rules = [
		{
			name: "name",
			rule: ["required"],
			msg: ["请输入真实姓名"]
		},{
			name: "mobile",
			rule: ["required", "isMobile"],
			msg: ["请输入手机号", "请输入正确的手机号"]
		},
		{
			name: "sex",
			rule: ["required"],
			msg: ["请选择性别"]
		},
		{
			name: "idcard",
			rule: ["required","isIdCard"],
			msg: ["请输入证件号码","请输入正确的证件"]
		},
		{
			name: "countyName",
			rule: ["required"],
			msg: ["请输入国家或地区"]
		},
		{
			name: "emerPerson",
			rule: ["required"],
			msg: ["请输入紧急联系人"]
		},
		{
			name: "emerMobile",
			rule: ["required"],
			msg: ["请输入紧急联系电话"]
		},
		{
			name: "nation",
			rule: ["required"],
			msg: ["请输入民族"]
		},
	];
	export default {
		components: {},
		data() {
			return {
				actId:'',
				gId: '',
				//表单数据
				formData: {
					mobile: '',
					colthingSize: '',
					idCard: '',
					confirmPwd: '',
					emerPerson:'',
					emerMobile:'',
					sex: '',
					addressType: '1',
					certType: '身份证',
					birthday: '',
					bloodType:'',
					currentDate:''
					//birthday
				},
				
				showCert: false,
				
				certTypes: [{
					text: "身份证",
					value: "身份证"
				}, {
					text: "护照",
					value: "护照"
				}, {
					text: "外国人永久居留身份证",
					value: "外国人永久居留身份证"
				}, {
					text: "往来台湾通行证",
					value: "往来台湾通行证"
				}, {
					text: "往来港澳通行证",
					value: "往来港澳通行证"
				}],
				showblood:false,
				bloodTypes: [{
					text: "A型血",
					value: "A型血"
				}, {
					text: "B型血",
					value: "B型血"
				}, {
					text: "O型血",
					value: "O型血"
				}, {
					text: "AB型血",
					value: "AB型血"
				}, {
					text: "Rh阳性血",
					value: "Rh阳性血"
				}, {
					text: "Rh阴性血",
					value: "Rh阴性血"
				}],
				birthdayStr: '',
				bloodTypeStr:'请选择血型',
				rules: rules,
				refundReasonTypes: [],
				refundReasonArray: [],
			}
		},
		methods: {
			canncel : function(e){
				uni.navigateBack(1);
			},
			changeCertType: function(e) {
				this.formData.certType = e.value;
			},
			changeBloodType: function(e) {
				let that = this
				that.formData.bloodType = e.value;
				that.bloodTypeStr = e.value;
			},
			bindDateChange: function(e) {
				console.log(e);
				let that = this
				that.formData.birthday = e.detail.value;
				that.birthdayStr = e.detail.value;
			},
			bindPickerChange: function(e) {
				console.log(e.detail.value);
				//this.formData.colthingSize = e.detail.value;
				// this.refund.reasonIndex = e.detail.value;
				this.formData.colthingSize = this.refundReasonArray[e.detail.value]
			},
			changeGender(e) {
				let that = this
				that.formData.gender = e.detail.value;
			},
			formSubmit: function(e) {
				let that = this;
				// if (!this.$refs.form) return;
				let formData = e.detail.value;
				let checkRes = form.validation(formData, rules);
				if (!checkRes) {
					
					let birthday = formData.birthday;
					if(birthday == "" || birthday === ""){
						uni.showToast({
							title: "请选择出生日期",
							icon: "none"
						})
						return;
					}
					let colthingSize = formData.colthingSize;
					console.log(colthingSize);
					if(colthingSize == "" || colthingSize === ""){
						uni.showToast({
							title: "请选择衣服尺码",
							icon: "none"
						})
						return;
					}
					let bloodType = formData.bloodType;
					console.log(colthingSize);
					if(bloodType == "" || bloodType === ""){
						uni.showToast({
							title: "请选择血型",
							icon: "none"
						})
						return;
					}
					console.log(this.formData)
					console.log('校验通过！')
					let that = this;
					util.request('activities/submitOrder', {
						actId: this.actId,
						groupId:this.gId,
						name: this.formData.name,
						mobile: this.formData.mobile,
						sex:this.formData.sex,
						certType:this.formData.certType,
						idcard:this.formData.idcard,
						countyName:this.formData.countyName,
						emerPerson:this.formData.emerPerson,
						emerMobile:this.formData.emerMobile,
						bloodType:this.formData.bloodType,
						colthingSize:this.formData.colthingSize,
						birthday:this.birthdayStr,
						nation:this.formData.nation,
					}, 'POST').then(res => {
						if (res.code === 0) {
							const orderId = res.data.id;
							console.log("--------------------------------------");
							console.log(orderId);
							console.log("--------------------------------------");
							util.actPayOrder(orderId).then(res => {
								uni.redirectTo({
									url: '/pagesA/activities/actPayResult?status=1&orderId=' + orderId
								});
							}).catch(res => {
								uni.redirectTo({
									url: '/pagesA/activities/actPayResult?status=0&orderId=' + orderId + '&msg=' + res.errMsg
								});
							});
							util.toast('恭喜您报名成功！！！', 2000, 'none');
							uni.navigateBack(1);
						} else {
							util.toast(res.msg, 2000, 'none');
						}
					});
					
					
					
				}else {
					//校验失败 checkRes 为错误信息
					uni.showToast({
						title: checkRes,
						icon: "none"
					});
				}
			},
			
			// getReasons() {
			// 	let that = this;
			// 	util.request('index/queryDictByCode', {
			// 		code: 'COLTHING_SIZE'
			// 	}, 'POST').then(function(res) {
			// 		if (res.code === 0) {
			// 			console.log(res);
			// 			that.refundReasonTypes = res.list
			// 			that.refundReasonArray = that.refundReasonTypes.map(o => o.name);
			// 			// that.refund.reasonIndex = '0'
			// 			// that.refund.reason = that.refundReasonArray[0]
			// 		}
			// 	});
			// },
			
		},
		onLoad(options) {
			
			var today = new Date();
			var year = today.getFullYear();
			
			this.currentDate = year +"-01-01"
			
			this.gId = options.gId
			this.actId = options.actId
			
			//this.getReasons();
			
			uni.setNavigationBarTitle({
				title: options.title
			});
		}
	}
</script>

<style>
	.form-item {
		height: 100rpx;
		padding-left: 31.25rpx;
		border-bottom: 1px solid #d9d9d9;
		display: flex;
		align-items: center;
		padding-right: 31.25rpx;
		background-color: #FFFFFF;
	}

	.tui-title {
		width: 100%;
		font-size: 28rpx;
		color: #888;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.tui-btn__box {
		width: 100%;
		padding: 60rpx 30rpx;
		box-sizing: border-box;
	}
	.tui-btn-box {
		padding: 40rpx 50rpx;
		box-sizing: border-box;
	}
	.tui-btn-box {
		padding: 40rpx 50rpx;
		box-sizing: border-box;
	}

	.gender {
		display: flex;
		padding-left: 30rpx;
		font-size: 16px;
		color: #333;
		background-color: #FFFFFF;
		align-items: center;
		min-height: 48px;
		border-bottom: 1px solid #d9d9d9;
	}
</style>